<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $div = $("#div01");     // id
            var $div2 = $('.box');      //class
            var $li = $('li');          //
            var $span = $('.box span');
            // 属性选择器
            var $div3 = $('div[class="box2"]');

            // 选择包含apan标签的div
            var $div4 = $('div').has('span');

            // 选择class不是box2的div
            var $div5 = $('div').not('.box2');

            // 选择第四个li
            var $li2 = $('li').eq(3);

            $div.css({'color': 'red', 'font-size': 30});
            $div2.css({'color': 'gold', 'font-size': 30});
            $li.css({'background': 'gold'})
            $span.css({'color': 'red', 'font-size': 40, 'background': "#000000", 'font-weight': 'bold'});
            $div3.css({'color': 'pink', 'font-size': 30});

            $div4.css({'text-indent': 50});
            $div5.css({'text-decoration': 'underline'});
            $li2.css({'text-indent': 50});
        })
    </script>
</head>
<body>
    <div id="div01">这个是第一个div</div>
    <div id="div02" class="box">这个是第二个<span>div</span></div>
    <div id="div03" class="box">这个是第三个div</div>
    <div id="div03" class="box2">这个是第四个div</div>
    <ul>
        <li>wdnmd</li>
        <li>wdnmd</li>
        <li>wdnmd</li>
        <li>wdnmd</li>
        <li>wdnmd</li>
        <li>wdnmd</li>
    </ul>
</body>
</html>